<label>Default button and content</label>
<DropdownInput />

<label>Custom button</label>
<DropdownInput>
    <div slot="button"><i class="fa fa-chevron-circle-down"></i> Click me</div>
</DropdownInput>

<label>Custom content</label>
<DropdownInput width="50ex">
    <div slot="content">
        <p>{@html lorem}</p>
    </div>
</DropdownInput>

<label>Custom button and content</label>
<DropdownInput width="50ex" bind:visible="open">
    <div slot="button">
        <button class="btn" class:btn-primary="!open">
            <i class="fa fa-info-circle"></i> Click to read {open?'less':'more'}
        </button>
    </div>
    <div slot="content">
        <p>{@html lorem}</p>
    </div>
</DropdownInput>

<script>
    import DropdownInput from '../DropdownInput.html';

    export default {
        components: { DropdownInput },
        data() {
            return { open: false };
        },
        computed: {}
    };
</script>
<style>
    label {
        margin-bottom: 5px;
    }
    label:not(:first-child) {
        margin-top: 2em;
    }
    p {
        margin: 5px 10px;
    }
</style>
